import FormLayout from "@/components/forms/formLayout"
import styled from "@emotion/styled"
import EasyFormProvider from "@/components/forms/EasyFormProvider"
import _ from "lodash"
import { useNavigate } from "react-router-dom"
import { toast } from "react-toastify"
import ApiFetchers from "@/apis/api_fetchers"
// import { useSetAtom, useAtomValue } from "jotai"
// import { verifyAtom } from "@/pages/AccountPage/atoms/verify"
import { useAtom } from "jotai"
import { SetInitVerifyAtom, SetVerifyAtom, verifyAtom } from "@/pages/AccountPage/atoms/verify"
import { useModalSlideUp } from "@/features/useModal"

interface SetPassword {
    password: string
    new_password: string
}
const sleep = (delay: number | undefined) => new Promise((resolve) => setTimeout(resolve, delay))

const Password = () => {
    const navigate = useNavigate()
    // const verifyData = useAtomValue(verifyAtom)
    const [verifyData] = useAtom(verifyAtom)
    const [, setVerifyData] = useAtom(SetVerifyAtom)
    const [, setInitVerifyData] = useAtom(SetInitVerifyAtom)
    const isSetPassword = verifyData?.type === "create" //创建密码
    const isResetPassword = verifyData?.verifyMethod === "phone" //通过手机验证码修改密码
    const text = isSetPassword ? "Create Login password" : "Set New Password"
    const { close } = useModalSlideUp("account-page")
    const oldPassword = verifyData?.oldPassword ?? ""
    console.log("setVerify", verifyData)
    const handleConfirm = _.throttle(async (data: SetPassword) => {
        console.log("passdata", data)
        //创建或者修改密码的参数
        const params: SetPassword = {
            password: isSetPassword ? "" : oldPassword,
            new_password: data.password,
        }
        //通过手机验证码修改密码接口需要的参数
        const resetParams = {
            code: verifyData?.code,
            new_password: data.password,
            otp_id: verifyData?.otpId,
        }
        console.log("passparams", params)
        if (isResetPassword) {
            const res = await ApiFetchers.resetPasswordWithOtpCode(resetParams) //通过手机验证码修改密码
            if (res) {
                toast("Set Password Success")
                setInitVerifyData()
                navigate("/s-account")
                close()
            } else {
                toast("Set Password Failed")
            }
        } else {
            const res = await ApiFetchers.refUpdatePassword(params) //创建密码或者修改密码
            await sleep(500)
            console.log("refUpdatePassword", res)

            if (res) {
                toast("Update Password Success")
                setInitVerifyData()
                navigate("/s-account")
                close()
            } else {
                toast("Update Password Failed")
            }
        }
    }, 5000)

    return (
        <FormLayout
            title={text}
            description=""
            backPath="/s-account"
        >
            <EasyFormProvider
                // @ts-ignore
                onSubmit={handleConfirm}
                showVerifyBox={true}
                queryList={["password", "submitButton"]}
                buttonText="Confirm"
            />
        </FormLayout>
    )
}

export default Password
